<template>
	<view>
		<!-- 顶部获取微信收货地址 -->
		<view class="wechat-address" @click="$refs.popup.open()">
			<view class="wechat-address-left">
				<view class="weixin-icon">
					<uni-icons type="weixin" size="20" color="#07c160"></uni-icons>
				</view>
				<text>获取微信收货地址</text>
			</view>
			<uni-icons type="right" size="18"></uni-icons>
		</view>

		<view style="padding: 20rpx 20rpx 0" v-for="item in cneeList" :key="item._id">
			<cnee-card :cneeData="item"></cnee-card>
		</view>
		<!-- 底部新增收货地址 -->
		<navigator url="/subpkg/add-address/add-address" class="add-address">
			+新增地址
		</navigator>

		<!-- 点击获取微信地址的弹出框 -->
		<uni-popup ref="popup" type="center">
			<view class="popup-box">
				<view class="close-btn" @click="$refs.popup.close()">
					<uni-icons type="closeempty" size="16"></uni-icons>
				</view>
				<view class="popup-box-info">暂无收货地址，请到手机上添加默认收货地址！</view>
				<button class="popup-box-btn" size="mini" type="primary" @click="$refs.popup.close()">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {

			};
		},
		computed: {
			...mapState({
				cneeList: ({
					user
				}) => user.cneeList,
			}),
		},
		onLoad() {
			this.$store.dispatch('getCneeList');
		}
	}
</script>

<style lang="scss">
	.add-address {
		position: fixed;
		bottom: 10rpx;
		left: 30rpx;
		right: 30rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 26rpx;
		color: #fff;
		background-color: $my-tawny;
		border-radius: 40rpx;
	}

	.wechat-address {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		width: calc(100vw-40rpx);
		height: 80rpx;
		padding: 0 25rpx;
		margin: 20rpx 20rpx 0;
		background-color: #fff;
		border-radius: 15rpx;

		.wechat-address-left {
			font-size: 28rpx;

			.weixin-icon {
				display: inline-block;
				padding-right: 10rpx;
				vertical-align: middle;
			}
		}
	}

	.popup-box {
		position: relative;
		width: 600rpx;
		height: 350rpx;
		background-color: #f5f5f5;

		.close-btn {
			position: absolute;
			top: 10rpx;
			right: 15rpx;
		}

		.popup-box-info {
			padding-top: 130rpx;
			font-size: 25rpx;
			text-align: center;
		}

		.popup-box-btn {
			position: absolute;
			left: 50%;
			bottom: 40rpx;
			transform: translateX(-50%);
		}
	}
</style>
